// HeaderSection.styles.js

// 标题的样式
export const headerSX = {
  // 根据屏幕尺寸设置不同的字体大小
  fontSize: { xs: '2rem', sm: '3rem', md: '3.5rem', lg: '3.5rem' }
};

// 主容器的样式
export const containerStyles = {
  // 容器高度
  height: '100vh',
  // 使用flex布局
  display: 'flex',
  // 主轴方向居中对齐
  justifyContent: 'center',
  // 交叉轴方向居中对齐
  alignItems: 'center'
};

// 网格容器的样式
export const gridContainerStyles = {
  // 上边距（marginTop），根据屏幕尺寸进行设置
  mt: { xs: 10, sm: 6, md: 18.75 },
  // 下边距（marginBottom），根据屏幕尺寸进行设置
  mb: { xs: 2.5, md: 10 }
};

// 图片网格的样式
export const imageGridStyles = (theme) => ({
  // 在小屏幕上隐藏，在中等屏幕上显示
  display: { xs: 'none', md: 'flex' }
});

// 相对定位Box的样式
export const relativeBoxStyles = {
  // 设置为相对定位
  position: 'relative',
  // 设置上边距（marginTop）
  mt: 8.75,
  // 设置层叠顺序（z-index）
  zIndex: 9
};

// Header动画图片的样式
export const HeaderAnimationImageStyles = (theme, rtlLayout) => ({
  // 在小屏幕上隐藏，在中等屏幕上显示
  display: { xs: 'none', md: 'flex' },
  // 设置为绝对定位
  position: 'absolute',
  // 不使用滤镜
  filter: 'none',
  // 在中等屏幕上设置底部为0
  bottom: { md: 0 },
  // 设置右侧为0
  right: 0,
  // 宽度设置为50%
  width: '50%',
  // 设置变换原点
  transformOrigin: '50% 50%',
  // 根据布局方向进行旋转变换
  transform: rtlLayout ? 'rotateY(180deg)' : 'rotateY(0deg)'
});
